<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="上滑">
<input type="button" value="下滑">
<input type="button" value="自定义">
<hr>
<img src="../220616-1635257176b5c8.jpg" style="width: 100px;position: relative">
<!-- 引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("input:eq(0)").click(function () {
        $("img").hide(2000);//隐藏
        alert("xxx");
    })
    $("input:eq(1)").click(function () {
        $("img").show(2000)//显示
    });
    $("input:eq(2)").click(function () {
        $("img").fadeOut(2000);//淡出
    })
    $("input:eq(3)").click(function () {
        $("img").fadeIn(2000);//淡入
    })
    $("input:eq(4)").click(function () {
        $("img").slideUp(2000);//上滑
    })
    $("input:eq(5)").click(function () {
        $("img").slideDown(2000);//下滑
    })
    $("input:eq(6)").click(function () {
        $("img").animate({"left": "200px"}, 2000)//自定义
            .animate({"top": "200px"}, 2000)
            .animate({"left": "0px"}, 2000)
            .animate({"top": "0px"}, 2000)
            .animate({"width": "200px"}, 2000)
            .animate({"width": "100px"}, 2000)
        .fadeOut(1000);
    })
</script>
</body>
</html>